<template>
<!--查看单个订单弹框中的详细信息组件  -->
  <div class="list-box">
    <div class="baseInfo" >
      <a-row class="rows" v-if="haveBarCode">
        <div class="barcode" >
          <img id="barcode" />
        </div>
        <p class="codeTitle">{{BarCode}}</p>
      </a-row>
      <a-row class="rows" type="flex" justify="start" align="middle">
        <a-col :span="span" v-for="item in infoDatas" :key="item.id">
          <div class="cells" >
            <a-col class="cellchild title" :span="10" >
              <div class="flex">
                <div class="flex1">{{item.title}}</div>
                <div class="flex2" v-if="item.title">:</div>
              </div>
            </a-col>
            <a-col class="cellchild value" :span="14" >
              <img v-if="item.type=='img'" :src="item.value" style="height:120px;width:180px" >
              <span v-else-if="item.type=='percentage'" >
                {{item.value?item.value+'%':null}}
              </span>
              <span v-else :style="item.toFixed2?priceStyle:null" >
                {{item.toFixed2?tofixed2(item.value):item.value}}
                <span style="color:#BBB;fontSize:12px" v-if="!item.value">{{item.tips}}</span>
              </span>
            </a-col>
          </div>
        </a-col>
      </a-row>
      <div class="clearfloat"></div>
    </div>
    <div class="QRcode" v-if="haveQRCode">
      <div>
        <div class="qrcode" ref="qrCodeUrl"></div>
        <p class="codeTitle">商品二维码</p>
      </div>
    </div>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
import QRCode from 'qrcodejs2'
export default {
    props:{
        infoDatas:{
            type:Array
        },
        span:{
          type:String,
          default:"8"
        },
        //  :haveBarCode="true" :BarCode="BarCode" 
        haveBarCode:{
          type:Boolean,
          default:false
        },
        BarCode:{
          type:String,
          default:'914103810522745132'
        },
        //  :haveQRCode="true" :QRCode="QRCode" 
        haveQRCode:{
          type:Boolean,
          default:false
        },
        QRCode:{
          type:String,
          default:'914103810522745132'
        }
    },
    data(){
        return {
           priceStyle:{
              fontWeight: '600',
              color: '#222',
              
           }
        }
    },
    watch:{
      BarCode(val){
        this.createBarCode();
      },
      QRCode(val){
        this.creatQrCode();
      },
    },
    mounted(){
      console.log('7878787');
      
    },
   computed:{
    tofixed2(){
      return (text)=>{
        if (text) {
          let toNum=parseFloat(text)
          return toNum.toFixed(2) +' 元'
        }else{
          return ''
        }
      }
    },
   },
    methods:{
      createBarCode(){
        JsBarcode('#barcode', this.BarCode, {
          format: 'CODE128',
          lineColor: '#000',
          background: '#ffffff',
          width: 1.5,
          height: 40,
          displayValue: false
        })
      },
      creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: this.QRCode, // 需要转换为二维码的内容
              width: 150,
              height: 150,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
      },
    }
}
</script>

<style scoped>
.list-box{
   display: flex;
}
.baseInfo{
  flex: 1;
}
.barcode{
  display: flex;
  align-items: center; 
  justify-content: center;
  margin: 2px 0;
}
.QRcode{
  width: 250px;
  display: flex;
  align-items: center; 
  justify-content: center;
}
.codeTitle{
  text-align: center;
  line-height: 25px;
  margin: 0;
}
.clearfloat{clear:both;height:0;}
.list-box .cells{
    /* border: 1px solid sienna; */
    margin: 5px 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
}
.list-box .rows{
    width: 100%;
    border: 1px solid teal;
    margin-bottom: 10px;
}
.list-box .title{
    /* background-color:skyblue; */
    text-align:right;
    color: teal;
    
}
.flex{
  display: flex;
  width: 100%;
}
.flex1{
  flex: 1;
}
.flex2{
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-box .value{
    /* background-color:springgreen; */
    text-align: left;
}
.cells .space5px{
    margin: auto 5px;font-weight: bolder;
}
</style>